<template>
    <div style="margin-left: 0.5rem;margin-right: 0.5rem;">
        <!-- 调用后端接口渲染 -->

        <!-- 调用后端接口渲染轮播 -->

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 100%;height:13rem;">
            <van-swipe-item v-for="(item, index) in listData" :key="index">
                <img :src="item.image" alt="" style="width: 100%;height: 100%;">
            </van-swipe-item>
        </van-swipe>
        <div>
            <!-- 渲染数据 实现上拉下拉 -->
           <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell v-for="(item, index) in listData" :key="index" class="list" @click="kuyx(item.id)" style="width: 110%;">
                   
                        <!-- 图片 -->
                        <img :src="item.image" alt="" class="left">
                        <!-- 文字 -->
                        <div class="right" style=" float: left;margin-left: 2%; width: 15.4rem;height: 100%;">
                            <div class="mock"
                                style="float: left; width: 88.8%;;margin-left: 1%; text-align:left;white-space: pre-wrap;">
                                {{ item.title }}
                            </div>

                            <div class="button" style="float: left; margin-left: 2%;margin-top: 10%; width: 100%;">

                                <div style="width: 39%;float: left;margin-right: 4%;margin-left: -4%;">
                                    <span style="margin-right: 8px;">{{ item.channel_name }}</span>
                                    <span>{{ item.date_str }}</span>
                                </div>

                                <div style="width:50%;float: left;margin-left: 24px;">
                                    <span style="float: left;margin-right:7px;">阅读
                                        {{ (item.view_times*0.001).toFixed(1) }}万
                                        </span>
                                    <span style="float: left;">赞{{ (item.news_id*0.001).toFixed(0) }}</span>
                                </div>
                            </div>
                        
                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
            <div>

            </div>
            <!-- <div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import http from '@/http/axios'
import { put } from 'node_modules/axios/index.cjs';
import router from '@/router';
 

const kuyx = (id: number) => {
    router.push({ path: '/Enquirefordetails', query: { id: id } })
}

const listData = ref([])
// https://www.chunyuyisheng.com/cooperation/wap/health_news/
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

// 请求接口
async function GetList() {
    const resp = await http.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
         page: 1,
      partner: 'chunyu_wap_mini',
      release_time: '2020-04-22',
      channel_id: '21'
        }
    })
    console.log(resp.data.content_list);
    const totalCount = resp.data.content_list
    listData.value = totalCount
}
// 上拉刷新下拉加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            listData.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 5; i++) {
            listData.value.push(listData.value.length + 1);
            GetList()
        }
        loading.value = false;

        if (listData.value.length >= 10) {
            finished.value = true;
            // put.GetList()
        }
    }, 1000);
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;

    onLoad()
};



</script>
<style lang="scss" scoped>
.list {
    width: 100%;
    height: 144px;
    height: 9rem;
}

.list .left {
    float: left;
    width: 28%;
}

.list .rigth {
    float: left;
    width: 90%;
    border-top: 10px solid #ccc;
    border-top: 0.625rem solid #ccc;
    margin-left: 1%;
}

.van-cell__value .rigth .mock {
    width: 320px;
}

.van-cell__value .rigth .bootton {
    font-size: 24px;
}

.van-cell__value .rigth .bootton div {
    float: left;
    width: 50%;
}
</style>